/* eslint-disable react-hooks/exhaustive-deps */
import React, { useContext } from 'react'
import ReactEcharts from 'echarts-for-react'
import { useEffect } from 'react'
import { getClassList, getVideoUser } from '@/services/student';
import { useState } from 'react';
import { Empty } from 'antd';
import { CourseContext } from '../../..';
interface Params {
  type: number
}
export default function Interact(props: Params) {
  const { type } = props;
  const [data1, setData1] = useState<any>([])
  const [data2, setData2] = useState<any>([])
  const [data3, setData3] = useState<any>([])
  const [show, setShow] = useState<boolean>(false)
  const ctx = useContext(CourseContext);

  useEffect(() => {
    (async () => {
      if (type == 1) {
        const res = await getClassList({ uid: ctx.uid, courseId: ctx.courseId })
        const res1 = res.result?.records?.map((item: any) => {
          return `${item?.courseItemName}`
        })
        const com = res.result?.records?.map((item: any) => {
          const joinCount = item.joinCount ?? 0
          const allCount = item.allCount ?? 0
          if (allCount == 0) return 0;
          const precent = (joinCount / allCount * 100).toFixed(2)
          return precent
        })
        const right = res.result?.records?.map((item: any) => {
          const rightCount = item.rightCount ?? 0
          const allCount = item.allCount ?? 0
          if (allCount == 0) return 0;
          const precent = (rightCount / allCount * 100).toFixed(2)
          return precent
        })
        setData1(res1)
        if (res1?.length > 0) {
          if (res1?.length > 6) {
            setShow(true)
          } else {
            setShow(false)
          }
        }
        setData2(com)
        setData3(right)
      } else {
        const res = await getVideoUser({ uid: ctx.uid, courseId: ctx.courseId })
        const res1 = res.result?.map((item: any) => {
          return item.courseItemName
        })
        const com = res.result?.map((item: any) => {
          return Number.parseFloat(item?.joinPercent ?? '0').toFixed(2)
        })
        const right = res.result?.map((item: any) => {
          return Number.parseFloat(item?.rightPercent ?? '0').toFixed(2)
        })
        setData1(res1)
        setData2(com)
        setData3(right)

      }
    })();

  }, [ctx])


  const option1 = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'horization',
      x: 'right',
      y: 'center',
      data: ['互动参与率', '互动正确率']
    },
    grid: {
      right: '120',
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: -20,
        top: 5,
        textStyle: {
          color: '#000',
          fontSize: 12,

        }
      },
      data: data1 || data1
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLine: {
        show: true,
      },
      splitNumber: 10,
      // minInterval: 1,

    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        start: 0,
        end: Math.floor(100 / (data1?.length / 6)),  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, //组件高度
        // left: 5, //左边的距离
        // right: 5, //右边的距离
        bottom: 10, //下边的距离
        show: show,  // 是否展示
        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        handleSize: 0,      //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        zoomLock: true,         //是否只平移不缩放
        moveOnMouseMove: false //鼠标移动能触发数据窗口平移
        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
      },
      {
        type: 'inside', // 内置在坐标系中
        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: Math.floor(100 / (data1?.length / 6)), // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomOnMouseWheel: false,  // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
      }
    ],
    series: [
      {
        name: '互动参与率',
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: "#ff5e5c",
            lineStyle: {
              color: "#ff5e5c"
            }, label: {
              show: true
            }
          }
        },
        data: data2
      },
      {
        name: '互动正确率',
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,

        itemStyle: {
          normal: {
            color: "#ff9d50",
            lineStyle: {
              color: "#ff9d50"
            }, label: {
              show: true
            }
          }
        },
        data: data3
      }
    ]
  }
  return (
    <div>
      {
        data1 && data1.length !== 0 ?
          <ReactEcharts notMerge option={option1} />
          : <Empty description={type == 1 ? '直播课开没有开始哦' : '还没有已解锁的互动视频课'} image={Empty.PRESENTED_IMAGE_SIMPLE} />

      }
    </div>
  )
}
